<template>
	<view>
		<view class="shopContainer" @click="gotoProjectVR">
			<image class="img" :src="shopInfo.entranceImagePath" mode="scaleToFill"></image>
		</view>
		<view class="onlookContainer">
			<view class="left">
				<text class="textBig">{{shopInfo.visitorNum||'...'}}</text>
				<text class="text">人围观</text>
			</view>
			<view class="right">
				<image class="icon" v-for="(item,index) in visitorList" :key="index" :style="{right:24*index+'rpx'}"
					:src="item.avatar" mode=""></image>
			</view>
		</view>


		<view class="bottomContainer2">
			<view class="oneBtn" @click="onShareVr">
				<image class="icon" src="/pages/shop/static/image/icon_share.png" mode=""></image>
				邀请好友进入带看
			</view>
		</view>
	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null


	export default {
		data() {
			return {
				visitorList: [],

			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},

		onLoad(options) {
			that = this;
			var curTime = Date.parse(new Date());
			curTime /= 1e3
			console.log("当前时间戳为：" + curTime)
			var projectId = uni.getStorageSync('projectId');
			var roomId = projectId + Math.floor(1e5 * Math.random()).toString();

			var param = {
				roomId: roomId, //===房间号
				ownerId: that.sellerObj.uuid, //===房间拥有者Id
				time: curTime,
			}
			that.shareTitleMixins = "您好，" + that.sellerObj.name + '带你VR看房~~~';
			that.sharePathParamMixin = '/pages/trtcRoom/videochat/index?' + utils.KeyValueToUrl(param);
			console.log(that.sharePathParamMixin)
			that.getProjectVisitors();
			that.getProjectInfo();
		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "getProjectInfo"]),
			getProjectVisitors() {
				let that = this
				api.getProjectVisitors({
					param: {
						limit: 10,
						page: 1,
					}
				}).then(res => {
					console.log("getProjectVisitors:", res)
					if (res.code == 0) {
						that.visitorList = res.data
					}
				})
			},
			onShareVr() {
				that.onShare({}, (obj) => {
					// 直接进入带看页面，有BUG
					that.openMiniProgram(obj)
				})
			},

			openMiniProgram(obj) {
				console.log("openMiniProgram",obj)
				if (obj&&obj.path&&obj.path.length > 0) {
					plus.share.getServices(
						res => {
							let sweixin = null;
							for (let i in res) {
								if (res[i].id == 'weixin') {
									sweixin = res[i];
								}
							}
							//唤醒微信小程序
							if (sweixin) {
								console.log("openMiniProgram",obj.path)
								sweixin.launchMiniProgram({
									id: that.shopInfo.wechatAppOriginId, //
									type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
									path: obj.path //'/pages/home/home'
								});
							}
						}
					);
				}
				
			},


			gotoProjectVROnline() {
				if (that.sharePathMixins.length > 0) {
					console.log("gotoProjectVROnline:", that.sharePathParamMixin)
					uni.navigateTo({
						url: that.sharePathParamMixin,
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '先邀请好友，才能VR带看',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			gotoProjectVR() {
				uni.navigateTo({
					url: '/pages/shop/web/index'
				})
			},


			getProjectInfo() {
				if (that.shopInfo.name.length == 0) {
					api.getProjectInfo({
						param: {
							//===1 预览模式，  0 正常模式
							preview: uni.getStorageSync("previewMode")
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.setShopInfo(res.data)
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.shopContainer {
		width: 714rpx;
		height: 500rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		margin-top: 30rpx;
		position: relative;
		margin-left: 18rpx;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
		}

		.btn {
			width: 160rpx;
			height: 54rpx;
			background: #000000;
			border-radius: 48rpx;
			opacity: 0.5;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 54rpx;
			text-align: center;
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
		}
	}

	.onlookContainer {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.left {
			margin-left: 30rpx;
			display: flex;
			align-items: flex-end;

			.textBig {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
				line-height: 34rpx;
				margin-right: 10rpx;
			}

			.text {
				font-size: 24rpx;
				font-weight: 500;
				line-height: 30rpx;
				color: #666666;
			}
		}

		.right {
			height: 60rpx;
			margin-right: 20rpx;
			position: relative;

			.icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				top: 14rpx;
				background-color: #FFFFFF;
				right: 0;
			}
		}
	}

	.bottomContainer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 122rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: #F3F3F3 1px solid;

		.container {
			width: 600rpx;
			height: 74rpx;
			background: #F6784C;
			border-radius: 37rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}
	}

	.bottomContainer2 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 122rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: #F3F3F3 1px solid;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);

		.oneBtn {
			width: 400rpx;
			height: 80rpx;
			background: #F6784C;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			line-height: 74rpx;
			font-size: 28rpx;
			z-index: 99999;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
		}

		.left {
			width: 232rpx;
			height: 74rpx;
			background: #F6784C;
			border-radius: 37rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			line-height: 74rpx;
			font-size: 28rpx;
			z-index: 99999;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
		}

		.right {
			width: 232rpx;
			height: 74rpx;
			background: #5E9FFD;
			border-radius: 37rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			line-height: 74rpx;
			z-index: 99999;
			margin-left: 84rpx;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
		}
	}
</style>